<template>
  <view class="Mall4j change-con" :animation="animation" @tap="showLangAn">
    <view class="gary-arrow">
      <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/arrow-left.png" :animation="animationArrow" />
    </view>
    <view class="lang-con" @tap="changeLang">
      {{ changeLangLabel }}
    </view>
  </view>
</template>

<script>

export default {

  components: {},
  props: {},
  data () {
    return {
      showLang: false,
      animation: '',
      animationArrow: '',
      changeLangLabel: 'En' // 当前语言
    }
  },

  beforeMount () {
    uni.getStorageSync('lang').indexOf('zh') != -1 ? this.changeLangLabel = 'En' : this.changeLangLabel = '中文'
  },
  methods: {
    changeLang () {
      if (uni.getStorageSync('lang').indexOf('zh') != -1) {
        this._i18n.locale = 'en'
        this.changeLangLabel = '中文'
        uni.setStorageSync('lang', 'en')
      } else {
        this._i18n.locale = 'zh_CN'
        this.changeLangLabel = 'En'
        uni.setStorageSync('lang', 'zh_CN')
      }
      uni.reLaunch({
        url: '/pages/index/index'
      })
    },
    showLangAn () {
      this.showLang = !this.showLang
      var animation = uni.createAnimation({
        duration: 600,
        timingFunction: 'ease'
      })
      var animationArrow = uni.createAnimation({
        duration: 400,
        timingFunction: 'ease'
      })
      this.animation = animation
      this.animationArrow = animationArrow
      if (this.showLang) {
        animation.translate(-45).step()
        animationArrow.rotate(180).step()
      } else {
        animation.translate(0).step()
        animationArrow.rotate(0).step()
      }
    }
  }
}
</script>
<style>
@import "./index.css";
</style>
